{{ include './header.html'}}
<body>
    <div id="wrap">  
        {{ include './left.html'}}
        <!-- 右侧具体内容栏目 -->
        <div id="rightContent">
            <div id="personInfor" style="text-align: right; background-color:blanchedalmond;">
                <p id="userName">
                <a> 用户:{{adminname}} </a>
                <a href="/admin/login/loginout">退出</a>
                <a class="meun-item" href="#chan" aria-controls="chan" role="tab" data-toggle="tab"><img
                        src="../../images/icon_change_grey.png">修改密码</a>
                </p>   
            </div>
           
            <!-- Tab panes -->
            <div class="tab-content">
                <!-- 总用户数 -->
                <div role="tabpanel" class="tab-pane active" id="statistical" style="width:1200px;height:200px;">
                    <div style="width:300px;height:200px; float: left;">
                        <div style="width: 300px;height:30px; text-align: center; color:black; font-size: 20px;">系统用户总数</div>
                        <label for="sName" class="col-xs-4 control-label"
                            style=" width: 300px; height: 170; font-size: 50px; font-family:'Courier New', Courier, monospace; text-align: center;">{{totoluser}}</label>                   
                    </div>

                    <div style="width:300px;height:200px; float: left;">
                        <div style="width: 300px;height:30px; text-align: center; color:black; font-size: 20px;">系统总打印次数</div>
                        <label for="sName" class="col-xs-4 control-label"
                            style=" width: 300px; height: 170; font-size: 50px; text-align: center;">{{totolprintNumber}}</label>                   
                    </div>

                    <div style="width:300px;height:200px; float: left;">
                        <div style="width: 300px;height:30px; text-align: center; color:black; font-size: 20px;">当日用户注册数</div>
                        <label for="sName" class="col-xs-4 control-label"
                            style=" width: 300px; height: 170; font-size: 50px; text-align: center;">{{todayUser}}</label>
                    </div>

                    <div style="width:300px;height:200px; float: left;">
                        <div style="width: 300px;height:30px; text-align: center; color:black; font-size: 20px;">当日打印数数</div>
                        <label for="sName" class="col-xs-4 control-label"
                            style=" width: 300px; height: 170; font-size: 50px; text-align: center;">{{todayPrintNumber}}</label>
                    </div>

                </div>

                <!-- 七日曲线 -->
                <div role="tabpanel" class="tab-pane active" id="sour" style="width: 1000px;height:500px;">
                   <div id="main1" style="width: 1000px;height:400px;"></div>
                    <input id="yAxis1" value="{{@number}}" type="hidden" /> 
                    <input id="series1" value="{{@date}}" type="hidden" />
                    <script type="text/javascript">
                    let myChart1 = echarts.init(document.getElementById('main1'));
                    var date = document.getElementById('series1').value;
                    var number = document.getElementById('yAxis1').value;
                    var yAxis1 =  number.split(',');
                    var series1 = date.split(',');

                    var option1 = {
                        title: {
                            text: '近七日打印曲线图'
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            type: 'category',
                            data: series1
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: yAxis1,
                            type: 'line'
                        }]
                    };

                    myChart1.setOption(option1);
                   </script>
        
                </div>
                
                <!-- 修改密码模块 -->
                {{ include './change_Password.html'}}

                <!--打印统计模块-->
                <div role="tabpanel" class="tab-pane active" id="print">
                    <div id="main" style="width: 1000px;height:500px;"></div>
                    <input id="yAxis" value="{{@usertoplistname}}" type="hidden" />
                    <input id="series" value="{{@usertoplistnumber}}" type="hidden" />
                    <script type="text/javascript">
                        let myChart = echarts.init(document.getElementById('main'));
                        var datas = document.getElementById('yAxis').value;
                        var data2 = document.getElementById('series').value;
                        var yAxis = datas.split(',');
                        var series = data2.split(',');

                        var option = {
                            title: {
                                text: '打印次数统计'
                            },
                            tooltip: {
                            },
                            legend: {
                                data: ['打印次数']
                            },
                            xAxis: {
                                type: 'value',
                                splitLine : {   //去掉网格线
                                   show : false
                                },
                                position: 'top',//X轴位置
                                
                            },
                            yAxis: {
                                data: yAxis,
                            },
                            series: [{
                                name: '打印次数',
                                type: 'bar',
                                data: series,
                                label: {
                                    show: true
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                barWidth: 30,//柱子宽度
                            }]
                        };

                        myChart.setOption(option);
                    </script>
                    
                </div>
  

            </div>
        </div>
    </div>

</body>

</html>